<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问属性</title>
    <script>
        function f1() {
            let btn = document.getElementById("btn");
            // 取值,通过对象名.属性名的方式访问
            console.log(btn.type)
            console.log(btn.value)
            console.log(btn.id)
            // 此处a属性属于自定义属性,无法访问
            console.log(btn.a)
            console.log(btn.onclick)
            // class属性也属于特殊情况,无法直接通过class访问
            console.log(btn.class)
            // 必须通过className获取对应class属性的值
            console.log(btn.className)

            // 赋值,通过对象名.属性名=属性值的方式进行赋值
            btn.type = "text";
            btn.value = "修改后的内容"
        }
        function f2(){
            let btn = document.getElementById("btn2");
            // 取值,通过对象.getAttribute("属性名")的方式访问属性
            // 可以访问所有属性
            console.log(btn.getAttribute("class"))
            console.log(btn.getAttribute("type"))
            console.log(btn.getAttribute("value"))
            console.log(btn.getAttribute("id"))
            console.log(btn.getAttribute("a"))
            console.log(btn.getAttribute("onclick"))

            // 赋值,通过对象名.setAttribute("属性名","属性值)的方式进行赋值
            btn.setAttribute("type","text");
            btn.setAttribute("value","修改后的value属性");
        }
    </script>
</head>
<body>
<input class="c1" type="button" value="访问DOM属性" id="btn" a="b" onclick="f1()">
<input class="c1" type="button" value="访问HTML属性" id="btn2" a="b" onclick="f2()">
</body>
</html>